﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>cndw</title>
<link rel="shortcut icon" href="./favicon.ico">
<link rel="stylesheet" type="text/css" href="./css/login.css" />
<script type="text/javascript" src="./js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="./js/jquery.qtip-1.0.0-rc3.min.js"></script>
<script type="text/javascript" src="./js/jquery.cookies.2.2.0.min.js"></script>
<script type="text/javascript" src="./js/ui.core.js"></script>
<script type="text/javascript" src="./js/ui.sortable.js"></script>
<script type="text/javascript" src="./js/jquery.blockUI.js"></script>
<script type="text/javascript">
    (function($){
        $.fn.shuffle = function() {
            return this.each(function(){
                    var items = $(this).children();
					return (items.length)? $(this).html($.shuffle(items,$(this)))
                        : this;
					});
        }
        $.fn.validate = function() {
            var res = false;
            this.each(function(){
                var arr = $(this).children();
                res =((arr[0].innerHTML=="c")&&
                      (arr[1].innerHTML=="n")&&
                      (arr[2].innerHTML=="d")&&
                      (arr[3].innerHTML=="w")&&
                      (arr[4].innerHTML==".")&&
                      (arr[5].innerHTML=="com"));
            });
            return res;
        }
        $.shuffle = function(arr,obj) {
            for(
				var j, x, i = arr.length; i;
                j = parseInt(Math.random() * i),
                x = arr[--i], arr[i] = arr[j], arr[j] = x
            );
            if(arr[0].innerHTML=="1") obj.html($.shuffle(arr,obj))
            else return arr;
        }
	})(jQuery);
	function ie(){
		var ie = (function(){
			var undef,
			v = 3,
			div = document.createElement('div'),
			all = div.getElementsByTagName('i');
			while (
				div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
				all[0]
			);
			return v > 4 ? v : undef;
		}());
		return ie;
	}
		
	function captcha(){
		if ($('#password').val() != ''){
			if($.cookies.get('badpassword') != 1){
				$('#captcha_remove').hide();
			}else{
				$('#captcha_remove').show();
			}
			$("#passchange").slideDown("slow");
		}
	}
	
	function login(){
		$.ajax({
			url: "/interface.php",
			type:"POST",
			cache: false,
			async: true,
			dataType:'text',
			data:{type:"login",user:$('#login').val(),pass:$('#password').val(),save:$('#remember_me').val()},
			success: function(data){
				if(data=='success'){
					$.cookies.del('badpassword');
					location.href="main.html";
				}else{
					$.cookies.set('badpassword',1);
					$("#passchange").hide();
					$("#login").qtip({
						content: '用户名或密码错误',
						position: {
							corner: {
								tooltip: 'leftMiddle'
							}
						},
						style: { 
							name: 'red' 
						},
						show: {
							delay:0,
							ready: true,
							when:{
								event:'inactive'
							}
						},
						hide:{
							delay:100,
							fixed:false,
							when:{
								target:$('#form'),
								event:'mouseover'
							}
						}
					});
				}
			}
		}); 
	}
	
	function has_login(){
		if (ie()){
			$.blockUI({
				message:  '<h1>请使用其他浏览器登陆...</h1>',
				css: { 
					border: 'none', 
					padding: '15px', 
					backgroundColor: '#000', 
					'-webkit-border-radius': '10px', 
					'-moz-border-radius': '10px', 
					opacity: .5, 
					color: '#fff' 
				}
			});
		}else{
			$.ajax({
				url: "/interface.php",
				type:"POST",
				cache: false,
				async: true,
				dataType:'text',
				data:{type:"has_login"},
				success: function(data){
					if(data=='success'){
						location.href="main.html";
					}else{
						$("#form").show();
					}
				}
			});
		}	
	}
	
    $(document).ready(function(){
    	$("#form").hide();
    	has_login();
		$("#login").qtip({
			content: '输入用户名',
			position: {
				corner: {
					tooltip: 'bottomLeft'
				}
			},
			style: { 
				name: 'blue' 
			},
			hide: true,
			show: { 
				ready: false,
				delay:100,
				when: { 
					event: 'focus'
				}
			},
			hide: {
				delay:100,
				when: { 
					event: 'blur'
				}
			}
		});
	
		$("#password").qtip({
			content: '输入密码',
			position: {
				corner: {
					tooltip: 'bottomLeft'
				}
			},
			style: { 
				name: 'blue' 
			},
			hide: true,
			show: {
				delay:100,
				ready: false,
				when: { 
					event: 'focus'
				}
			},
			hide: {
				delay:100,
				when: { 
					event: 'blur'
				}
			}
		});
		
        $("#sortable").sortable({
			deactivate:function(event, ui) {
				if ($('ul').validate()){
					$("#captcha").qtip({
						content: '<img src="/images/right.png" height="32" width="32"/>',
						position: {
							corner: {
								tooltip: 'leftTop'
							}
						},
						style:{
							width: 40,
							background:'#BBD0E3',
							border: {
								width: 0,
								radius: 0,
								color: '#BBD0E3'
							}
						},
						show: {
							delay:100,
							ready: true
						}
					});
				}
			}
		});
        $("#sortable").disableSelection();
        $('ul').shuffle();
		$("#passchange").hide();
        $("#submit").click(function(){
			if ($.cookies.get('badpassword') != 1){
				if($('#login').val()==""){
					$("#login").qtip({
						content: '请输入用户名',
						position: {
							corner: {
								tooltip: 'bottomLeft'
							}
						},
						style: { 
							name: 'red' 
						},
						show: { 
							ready: true,
							delay:100
						}
					});
				}else{
					login();
				}
			}else{
				if($('#login').val()==""){
					$("#login").qtip({
						content: '请输入用户名',
						position: {
							corner: {
								tooltip: 'bottomLeft'
							}
						},
						style: { 
							name: 'red' 
						},
						show: { 
							ready: true,
							delay:100
						}
					});
				}
				if(!($('ul').validate())){
					$("#captcha").qtip({
						content: '<img src="/images/error.png" height="32" width="32"/>',
						position: {
							corner: {
								tooltip: 'leftTop'
							}
						},
						style:{
							width: 40,
							background:'#BBD0E3',
							border: {
								width: 0,
								radius: 0,
								color: '#BBD0E3'
							}
						},
						show: {
							delay:100,
							ready: true
						}
					});
				}
				if(($('ul').validate())&&($('#login').val()!="")){
					login();
				}
			}
        });
    });
</script>
</head>
<body>
<div id="form">
  <label for="login"><b>用户名</b></label>
  <input type="text" id="login" name="login" value="" />
  <div class="clear"></div>
  <label for="password"><b>密&nbsp&nbsp&nbsp&nbsp码</b></label>
  <input type="password" id="password" name="password" value="" oninput="captcha()" onpropertychange="captcha()"/>
  <div class="clear"></div>
  <div id="passchange">
  <div id="captcha_remove" class="captcha_wrap">
        <div id="captcha" class="captcha">请摆出cndw的域名</div>
            <ul id="sortable">
                <li class="captchaItem">c</li>
                <li class="captchaItem">n</li>
                <li class="captchaItem">d</li>
                <li class="captchaItem">w</li>
                <li class="captchaItem">.</li>
                <li class="captchaItem">com</li>
            </ul>
  </div>
  <label for="remember_me" style="padding: 0;">Remember me?</label>
  <input type="radio" id="remember_me" style="position: relative; top: 3px; margin: 0; " name="remember_me" value="true"/>
  <div class="clear"></div>
  <br />
  <input id='submit' type="submit" style="margin: -20px 0 0 287px;" class="button" name="commit" value="Log in"/>
  </div>
</div>
</body>
</html>